<template>
  <view class="OrderPopup" v-if="flag">
    <Toast ref="Toast" />
    <view :class="'container ' + toastAnimate">
      <view class="close CloseBtn" @click="close"></view>
      <view class="info">
        <view class="img" :style="'background-image:url(' + info.imgUrl + ')'"></view>
        <view class="format">
          <view class="name">{{ info.name }}</view>
          <view class="tags" v-for="(item1, index1) in info.tagList" :key="index1">
            <view class="name">{{ item1.name }}</view>
            <view class="tag">
              <view
                :class="['btn', tags.indexOf(item2.id) > -1 ? 'active' : '']"
                v-for="(item2, index2) in item1.tagItemList"
                :key="index2"
                @click="handleMultipleBtn(item1, item2)"
              >
                {{ item2.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="price">
        <view class="text">￥{{ chooseInfo.totalPrice }}</view>
        <view class="num">
          <view class="minus" v-show="buyNum > 0" @click="buyNum--"></view>
          <view class="text" v-show="buyNum > 0">
            {{ buyNum }}
          </view>
          <view class="add" @click="buyNum++"></view>
        </view>
      </view>
      <view class="btn-format">
        <view class="btn" @click="handleOk">加入购物车</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      toastAnimate: "",
      tags: [],
      requiredTags: [],
      buyNum: 0,
      info: {},
    };
  },
  computed: {
    chooseInfo() {
      let price = 0;
      let tagsStr = [];
      let tagsPrice = 0;
      if (this.buyNum > 0) {
        price = this.info.sellPrice;
        for (let i in this.info.tagList) {
          let itemList = this.info.tagList[i].tagItemList;
          for (let j in itemList) {
            if (this.tags.indexOf(itemList[j].id) > -1) {
              price += itemList[j].sellPrice;
              tagsPrice += itemList[j].sellPrice;
              tagsStr.push(itemList[j].name);
            }
          }
        }
        price = price * this.buyNum;
      }
      return {
        totalPrice: price > 0 ? price : "-",
        tagsStr: tagsStr.toString(),
        tagsPrice,
      };
    },
  },
  methods: {
    close: function () {
      this.toastAnimate = "toastAnimateOut";
      setTimeout(() => {
        this.flag = false;
      }, 250);
    },
    show: function (json) {
      this.flag = true;
      this.toastAnimate = "toastAnimate";
      this.tags = [];
      this.buyNum = 1;
      this.requiredTags = [];
      this.info = json;
      let tagList = json.tagList;
      // 默认选项 & 必填选项
      for (let t1 in tagList) {
        let m1 = tagList[t1];
        let ids = [];
        for (let t2 in m1.tagItemList) {
          let m2 = m1.tagItemList[t2];
          ids.push(m2.id);
          if (m2.defaulted === 1) {
            this.tags.push(m2.id);
          }
        }
        if (m1.required === 1) {
          this.requiredTags.push({ name: m1.name, ids });
        }
      }
      console.log(json);
    },
    handleMultipleBtn: function (item1, item2) {
      if (item1.multiple == 1) {
        if (this.tags.indexOf(item2.id) == -1) {
          this.tags.push(item2.id);
        } else {
          this.tags.splice(this.tags.indexOf(item2.id), 1);
        }
      } else {
        let is = this.tags.indexOf(item2.id) === -1;
        for (let i in item1.tagItemList) {
          let index1 = this.tags.indexOf(item1.tagItemList[i].id);
          if (index1 > -1) {
            this.tags.splice(index1, 1);
          }
        }
        if (is) {
          this.tags.push(item2.id);
        }
      }
    },
    handleOk: function () {
      if (this.requiredTags.length) {
        let err = "";
        for (let r1 in this.requiredTags) {
          let m1 = this.requiredTags[r1];
          let isSucc = false;
          for (let r2 in m1.ids) {
            if (this.tags.indexOf(m1.ids[r2]) > -1) {
              isSucc = true;
              break;
            }
          }
          if (!isSucc) {
            err = m1.name;
            break;
          }
        }
        if (err !== "") {
          this.$refs.Toast.show({ title: "抱歉", content: "请选择" + err });
          return;
        }
      }
      if (this.buyNum === 0) {
        this.$refs.Toast.show({ title: "抱歉", content: "请选择数量" });
        return;
      }
      let returnData = {
        num: this.buyNum,
        tags: Object.assign([], this.tags),
        tagsStr: this.chooseInfo.tagsStr,
        tagsCountPrice: this.chooseInfo.tagsPrice,
      };
      console.log(this.info);
      console.log(returnData);
      this.$emit("ok", this.info, returnData);
    },
  },
};
</script>
<style scoped lang="scss">
.OrderPopup {
  font-size: 15px;
  z-index: 99999999999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);

  & > .container {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 90%;
    border-radius: 20rpx;
    transform: translate(-50%, -50%) scale(0.5);
    background: #fff;
    opacity: 0;
    font-size: 24rpx;
    & > .close {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      height: 50rpx;
      width: 50rpx;
      background: rgba(0, 0, 0, 0.5);
      z-index: 100000;
    }
    & > .info {
      position: relative;
      overflow-y: auto;
      max-height: 1000rpx;
      & > .img {
        position: relative;
        height: 450rpx;
        width: 100%;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }
      & > .format {
        padding: 0 30rpx;
        & > .name {
          font-size: 38rpx;
          color: #333;
          padding: 30rpx 0;
          font-weight: bold;
        }
        & > .tags {
          padding-bottom: 20rpx;
          & > .name {
            color: #5a5b5c;
            padding-bottom: 20rpx;
            font-size: 28rpx;
          }
          & > .tag {
            display: flex;
            & > .btn {
              font-size: 24rpx;
              color: #333;
              border-radius: 10rpx;
              padding: 10rpx 20rpx;
              margin: 0 20rpx 20rpx 0;
              border: solid 2rpx #ababab;
              &.active {
                color: var(--Main_Color);
                border-color: var(--Main_Color);
              }
            }
          }
        }
      }
    }
    & > .price {
      padding: 0 30rpx 30rpx 30rpx;
      display: flex;
      font-size: 32rpx;
      & > .text {
        flex: 1;
        width: 0;
        color: var(--Main_Color);
      }
      & > .num {
        display: flex;
        align-items: center;
        & > .minus {
          background-image: var(--Img_Common_Minus);
        }
        & > .add {
          background-image: var(--Img_Common_Add);
        }
        & > .minus,
        & > .add {
          position: relative;
          height: 40rpx;
          width: 40rpx;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
        }
        & > .text {
          line-height: 1;

          padding: 0 30rpx;
        }
      }
    }
    & > .btn-format {
      position: relative;
      font-size: 28rpx;
      padding: 0 30rpx 40rpx 30rpx;
      & > .btn {
        background: var(--Main_Color);
        position: relative;
        width: 100%;
        font-size: 28rpx;
        color: #fff;
        border-radius: 20rpx;
        text-align: center;
        padding: 20rpx 0;
        box-sizing: border-box;
      }
    }
  }

  .toastAnimateOut {
    animation: toastAnimateOut 0.3s ease-out forwards;
  }
  .toastAnimate {
    animation: toastAnimate 0.3s ease-out forwards;
  }
  @keyframes toastAnimate {
    0% {
      transform: translate(-50%, -50%) scale(0.7);
      opacity: 0;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.05);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
  @keyframes toastAnimateOut {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(0.7);
      opacity: 0;
    }
  }
}
</style>
